<!--
   @Author: Li bowei
   @Date: 2022/9/14
   @Description:知识图谱（添加节点组件）
 -->
<template>
  <!-- 空白处右键 -->
  <ul
    v-show="menuBarShow"
    id="blank_menubar"
    class="el-dropdown-menu el-popper blankmenubar"
    :style="blankMenuStyle"
    @click="menuBarClick"
    @mouseleave="menuBarLeave"
  >
    <li
      class="el-dropdown-menu__item blankmenubar_item"
      @click="btnAddSingle"
    >
      <!-- <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jiedian"></use>
        </svg> -->
      <span class="pl-15">添加节点</span>
    </li>
    <li
      class="el-dropdown-menu__item blankmenubar_item"
      @click="btnQuickAddNode"
    >
      <!-- <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-add-rd"></use>
        </svg> -->
      <span class="pl-15">快速添加</span>
    </li>
  </ul>
</template>

<script>
export default {
  components: {},
  inject: ['quickAddNodes'],
  props: {
    data: Object
  },
  data() {
    return {
      top: '0px',
      left: '0px',
      menuBarShow: false
    }
  },
  computed: {
    blankMenuStyle() {
      return {
        position: 'absolute',
        top: this.top + 'px',
        left: this.left + 'px'
      }
    }
  },
  methods: {
    init(data) {
      this.top = data.top
      this.left = data.left
      this.menuBarShow = data.show
    },
    btnAddSingle() {
      this.$emit('changeCursor')
    },
    btnQuickAddNode() {
      this.quickAddNodes(this)
    },
    menuBarClick() {
      this.menuBarShow = false
    },
    menuBarLeave() {
      this.menuBarShow = false
    }
  }
}
</script>

  <style lang="scss" scoped>
    .blankmenubar {
      // width: 200px;

      .blankmenubar_item {
        height: 32px;
        line-height: 32px;
      }
    }
  </style>
